<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟键盘</title>
    <style>
        :root{
            font-size: 12px;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: grid;
            background: #abc;
            padding-bottom: 10rem;
        }
        .box{
            border-radius: 0.8rem;
            box-shadow: 0px 0px 1rem #000;
            display: grid;
            grid-template-columns: 60rem 13rem 16rem;
            width: 92rem;
            height: 26rem;
            padding: 2rem;
            margin: auto;
            background: rgb(238, 245, 255);
        }
        .grid{
            display: grid;
            column-gap: 1rem;
        }
        .areaA{
            display: grid;
            grid-template-rows: repeat(6,3.8rem);
        }
        .areaA .area1{
            grid-template-columns: 6rem repeat(3,3rem)
            5rem repeat(3,3rem) 5rem repeat(4,3rem);
        }
        .areaA .area2{
            grid-template-columns: repeat(13,3rem) 6rem;
        }
        .areaA .area3{
            grid-template-columns: 5rem repeat(12,3rem) 4rem;
        }
        .areaA .area4{
            grid-template-columns: 6rem repeat(12,3rem) 7rem;
        }
        .areaA .area5{
            grid-template-columns: 8rem repeat(11,3rem) 8rem;
        }
        .areaA .area6{
            grid-template-columns: 5rem repeat(2,4rem) 22rem repeat(4,4rem)
        }
        .key{
            border-radius: 0.6rem;
            box-shadow: 0px 0px .5rem #555;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .key:hover{
            background: greenyellow;
        }
        .backspace{
            width: 6rem;
        }
        .tab{
            width: 5rem;
        }
        .shu{
            width: 4rem;
        }
        .capslk{
            width: 6rem;
        }
        .enter{
            width: 7rem;
        }
        .shift{
            width: 8rem;
        }
        .shiftR{
            width: 9rem;
        }
        .ctrl,.win,.alt,.list{
            width: 4rem;
        }
        .ctrlL{
            width: 5rem;
        }
        .space{
            width: 22rem;
        }
        .areaB{
            display: grid;
            grid-template-rows: 15.2rem 8rem;
        }
        .areaB .area1{
            display: grid;
            grid-template-columns: repeat(3,4rem);
            grid-template-rows: repeat(3,3.8rem);
        }
        .areaB .area2{
            display: grid;
            grid-template-columns: repeat(3,4rem);
            grid-template-rows: repeat(2,3.8rem);
        }
        .areaC{
            display: grid;
            grid-template-rows: 3.8rem 20rem;
        }
        .areaC .area1{
            display: grid;
            grid-template-columns: repeat(4,4rem);
        }
        .areaC .area2{
            display: grid;
            grid-template-columns: repeat(4,4rem);
            grid-template-rows: repeat(5,3.8rem);
        }
        .light{
            width: 3rem;
            height: 3rem;
        }
        .light::before{
            content: "";
            width: 0.8rem;
            height: 1.4rem;
            display: block;
            margin: auto;
            margin-top: 0.8rem;
            border-radius: .2rem;
        }
        .light.on::before{
            background: greenyellow;
            box-shadow: inset 0 0 .5rem green;
        }
        .light.off::before{
            background: darkgrey;
            box-shadow: inset 0 0 .5rem grey;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="areaA">
            <div class="area1 grid">
                <div class="key">Esc</div>
                <div class="key">F1</div>
                <div class="key">F2</div>
                <div class="key">F3</div>
                <div class="key">F4</div>
                <div class="key">F5</div>
                <div class="key">F6</div>
                <div class="key">F7</div>
                <div class="key">F8</div>
                <div class="key">F9</div>
                <div class="key">F10</div>
                <div class="key">F11</div>
                <div class="key">F12</div>
            </div>
            <div class="area2 grid">
                <div class="key"><span>~</span><span>`</span></div>
                <div class="key"><span>!</span><span>1</span></div>
                <div class="key"><span>@</span><span>2</span></div>
                <div class="key"><span>#</span><span>3</span></div>
                <div class="key"><span>$</span><span>4</span></div>
                <div class="key"><span>%</span><span>5</span></div>
                <div class="key"><span>^</span><span>6</span></div>
                <div class="key"><span>&</span><span>7</span></div>
                <div class="key"><span>*</span><span>8</span></div>
                <div class="key"><span>(</span><span>9</span></div>
                <div class="key"><span>)</span><span>0</span></div>
                <div class="key"><span>—</span><span>-</span></div>
                <div class="key"><span>+</span><span>=</span></div>
                <div class="key backspace">Backspace</div>
            </div>
            <div class="area3 grid">
                <div class="key tab">Tab</div>
                <div class="key">Q</div>
                <div class="key">W</div>
                <div class="key">E</div>
                <div class="key">R</div>
                <div class="key">T</div>
                <div class="key">Y</div>
                <div class="key">U</div>
                <div class="key">I</div>
                <div class="key">O</div>
                <div class="key">P</div>
                <div class="key"><span>{</span><span>[</span></div>
                <div class="key"><span>}</span><span>]</span></div>
                <div class="key shu"><span>|</span><span>\</span></div>
            </div>
            <div class="area4 grid">
                <div class="key capslk">CapsLk</div>
                <div class="key">A</div>
                <div class="key">S</div>
                <div class="key">D</div>
                <div class="key">F</div>
                <div class="key">G</div>
                <div class="key">H</div>
                <div class="key">J</div>
                <div class="key">K</div>
                <div class="key">L</div>
                <div class="key"><span>:</span><span>;</span></div>
                <div class="key"><span>"</span><span>'</span></div>
                <div class="key enter">Enter</div>
            </div>
            <div class="area5 grid">
                <div class="key shift">Shift</div>
                <div class="key">Z</div>
                <div class="key">X</div>
                <div class="key">C</div>
                <div class="key">V</div>
                <div class="key">B</div>
                <div class="key">N</div>
                <div class="key">M</div>
                <div class="key"><span><</span><span>,</span></div>
                <div class="key"><span>></span><span>.</span></div>
                <div class="key"><span>?</span><span>/</span></div>
                <div class="key shiftR">Shift</div>
            </div>
            <div class="area6 grid">
                <div class="key ctrlL">Ctrl</div>
                <div class="key win">Win</div>
                <div class="key alt">Alt</div>
                <div class="key space"></div>
                <div class="key alt">Alt</div>
                <div class="key win">Win</div>
                <div class="key list">List</div>
                <div class="key ctrl">Ctrl</div>
            </div>
        </div>
        <div class="areaB">
            <div class="area1">
                <div class="key">Print</div>
                <div class="key">Lock</div>
                <div class="key">Pause</div>
                <div class="key">Insert</div>
                <div class="key">Home</div>
                <div class="key">Up</div>
                <div class="key">Del</div>
                <div class="key">End</div>
                <div class="key">Down</div>
            </div>
            <div class="area2">
                <div class="key" style="grid-column-start: 2;">↑</div>
                <div class="key" style="grid-row-start: 2;">←</div>
                <div class="key" style="grid-row-start: 2;">↓</div>
                <div class="key" style="grid-row-start: 2;">→</div>
            </div>
        </div>
        <div class="areaC">
            <div class="area1">
                <div class="light on"></div>
                <div class="light off"></div>
                <div class="light off"></div>
                <div class="light off"></div>
            </div>
            <div class="area2">
                <div class="key">Num</div>
                <div class="key">/</div>
                <div class="key">*</div>
                <div class="key">-</div>
                <div class="key">7</div>
                <div class="key">8</div>
                <div class="key">9</div>
                <div class="key" style="grid-row:2/4;grid-column:4;height: 6.8rem;">+</div>
                <div class="key">4</div>
                <div class="key">5</div>
                <div class="key">6</div>
                <div class="key">1</div>
                <div class="key">2</div>
                <div class="key">3</div>
                <div class="key" style="grid-row: 4/6;grid-column: 4;height: 6.8rem;">Enter</div>
                <div class="key" style="grid-column: 1/3;width: 7rem;">0</div>
                <div class="key">.</div>
            </div>
        </div>
    </div>
</body>
</html>